<template>
  <div class="home">
    <div class="item">
      <tasks @showMore="showMore" />
    </div>
    <div class="item"><card title="信息化更新公告" /></div>
    <div class="item"><card title="行政办公" /></div>
    <div class="item">
      <card title="常用功能" />
    </div>
    <div class="item">
      <docs ref="docs" @showMore="showMore" />
    </div>
    <div class="item"><card title="留言板" /></div>
    <!-- 列表弹窗 -->
    <list :list-type="type" :show-modal.sync="showLisModal" @viewDetail="viewDetail" />
  </div>
</template>

<script>
import list from './components/list.vue'
import tasks from './components/tasks'
import docs from './components/docs'
import card from './components/card.vue'
export default {
  name: 'Home',
  components: {
    tasks,
    docs,
    card,
    list
  },
  data() {
    return {
      showLisModal: false,
      type: ''
    }
  },
  mounted() {
  },
  methods: {
    showMore(type) {
      this.type = type
      this.showLisModal = true
    },
    viewDetail(type, data) {
      if (type === '2') {
        this.$refs.docs.viewDetail(data)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  width: 100%;
  background: #5b8ecd;
  display: flex;
  flex-wrap: wrap;
  .item{
    height: calc((100% - 4px) / 2);
    width: calc((100% - 8px) / 3);
    background: #fff;
    margin-bottom: 2px;
    margin-left: 2px;
  }
}
</style>
